<page-header-wrapper [title]="'协议配置'"></page-header-wrapper>

<nz-card>
  <div nz-row [nzGutter]="8">
    <div nz-col nzSpan="4">
      <ul nz-menu nzMode="inline" class="card-height">
        <li nz-menu-item [nzSelected]="item.type===tabItem.type" (click)="changeType(item)" *ngFor="let item of tabs;">
          {{ item.agreementName }}
        </li>
      </ul>
    </div>
    <div nz-col nzSpan="20" style="overflow: scroll">
      <nz-card class="card-height" *ngIf="!isUpdate">
        <div class="mb-md">
          <strong>{{ tabItem.agreementName }}</strong>
          <!-- <button class="btn-right" nz-button nzSize="large" nzType="default" (click)="update()">修改</button> -->
        </div>
        <div class="mb-lg">
          更新时间： {{ tabItem.modifyTime }}
          <a style="margin-left: 8px" target="_blank" [queryParams]="{ type: tabItem.type }"
            [routerLink]="['/passport/agreement']">预览</a>
          <button nz-button nzType="link" (click)="update()" acl
            [acl-ability]="['SYSTEM-AGREEMENT-CONFIG-save']">修改</button>
        </div>
        <div [innerHTML]="tabItem.agreementContent | safehtml"></div>
      </nz-card>

      <nz-card class="card-height" *ngIf="isUpdate">
        <div nz-row nzGutter="8">
          <div nz-col nzSpan="24">
            <sf #sf mode="edit" [schema]="schema1" [ui]="{ '*': { spanLabelFixed: 10, grid: { span: 24 }} }"
              button="none"> </sf>
          </div>
        </div>
        <div class="mb-md save-btn">
          <button nz-button nzSize="large" nzType="default" (click)="cancel()">取消</button>
          <button class="ml-lg" nz-button nzSize="large" nzType="primary" (click)="save()">保存</button>
        </div>
      </nz-card>
    </div>
  </div>
</nz-card>